<template>
	<!--  v-if="dataList.length dataList.length > 0 && value.style == 3" -->
	<view class="diy-seckill" :style="{ backgroundColor: value.backgroundColor, marginTop: value.marginTop * 2 + 'rpx' }">
		<template>
			<view class="marketing-wrap marketing-wrap-two" :class="'marketing-wrap-'+ value.style">
				<view class="marketimg-box"> 
					<view class="marketimg-box-title marketimg-box-title-3" v-if="value.style == 3">
						<view class="marketimg-box-title-left">
							<template v-for="(item, index) in value.list" v-if="item.style == 3">
								<image :src="$util.img(item.imageUrl)"></image>
							</template> 
						</view>
					</view>

					<view class="marketimg-box-con">
						<view class="marketimg-box-con-item" v-for="(dataItem, i) in dataList" :key="i" @click="toDetail(dataItem)">
							<view class="wrap">
								<view class="img-box">
									<image :src="goodsImg(dataItem.goods_image)" mode="widthFix" @error="imgError(index)"></image>
									<!-- <image :src="$util.img(dataItem.sku_image, { size: 'mid' })" mode="aspectFit" @error="imageError(i)"></image> -->
								</view>
								<view class="content">
									<view class="top">
										<view class="title">{{ dataItem.goods_name }}</view> 
									</view>
									
									<view class="bot">
										<view class="price-box">
											<view>
												<text class="unit color-base-text">￥</text>
												<text class="seckill-price color-base-text">{{ dataItem.discount_price }}</text>
												<image class="discount_tip" :src="$util.img('upload/uniapp/index/discount.png')" mode="widthFix"></image>
											</view>
											<text class="original-price">￥{{ dataItem.price }}</text>
										</view>
										<button class="btn color-base-bg" @click="toDetail(dataItem)">抢购</button>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					
					<view class="marketimg-box-title-right" @click="toMore()" v-if="value.style == 3">
						<text>更多折扣</text>
						<text class="iconfont iconright"></text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		name: 'diy-seckill',
		props: {
			value: {
				type: Object
			}
		},
		mixins: [globalConfig],
		data() {
			return {
				seckillId: 0,
				seckillIndex: null, //选中时间块的index
				index: null, //当前正在抢购的index,
				timeList: [],
				dataList: [],
				isNow: false,
				seckillH: '',
				seckillI: '',
				seckillS: '',
				seckillName: '',
				current: 0, //当前的swiper
				seckillInterval: null
			};
		},
		created() {
			this.getDataList(); 
		}, 
		methods: {  
			getDataList() {
				var page_size = 10;
				if (this.value.style == 2 || this.value.style == 3) {
					page_size = this.value.goodsCount;
				} 
				this.$api.sendRequest({
					url: '/api/goodssku/page',
					data: {
						page: 1,
						page_size: page_size,
						promotion_type:1,
					},
					success: res => {
						var data = res.data;
						if (data.list) {
							this.dataList = data.list;
						}
					}
				});
			},
			goodsImg(imgStr) {
				let imgs = imgStr.split(',');
				return imgs[0] ? this.$util.img(imgs[0], {
					size: 'mid'
				}) : this.$util.getDefaultImage().default_goods_img;
			}, 
			toMore() {
				this.$util.redirectTo('/pages/goods/list/list?promotion=1');
			},
			//商品详情
			toDetail(item) {
				this.$util.redirectTo('/pages/goods/detail/detail', {
					sku_id: item.sku_id
				});
			},
			imgError(index) {
				this.goodsList[index].goods_image = this.$util.getDefaultImage().default_goods_img;
			},
		},
		onPageHide() {
			clearInterval(this.seckillInterval);
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/components/diy-discount/diy-discount.scss';
	
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	/deep/.uni-scroll-view ::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	/deep/ .empty {
		height: 332rpx;
	}
</style>
